<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="messagewall.css">
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交，会将信息显示在下方</p>
        <div class="row">
            <span>谁:</span> <input type="text" id="from" placeholder="请输入你的名字">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" id="to" placeholder="请输入对方名字">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" id="say" placeholder="请输入留言内容">
        </div>
        <input type="button" value="提交" id="submit" onclick="submitMsg()">
        <div id="msgList"></div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        //获取留言记录
        // 页面加载时，发送GET请求获取留言列表
        load();
        function load() {
            $.ajax({
                url: '/message/getList',
                type: 'GET',
                success: function (res) {
                    //res是留言对象列表，属性值是from to say
                    //遍历留言列表
                    var divE = "";
                    for (var message of res) {
                        // 构造留言节点
                        divE += `<div class="message">${message.from} 对 ${message.to} 说: ${message.say}</div>`;
                    }
                    // 添加到留言列表,使用append方法
                    $("#msgList").append(divE);

                }
            });
        }



        //发布留言
        function submitMsg() {
            // 1.获取填写内容
            var from = $('#from').val().trim();
            var to = $('#to').val().trim();
            var say = $('#say').val().trim();
            if (from === '' || to === '' || say === '') {
                alert('请填写完整信息');
                return;
            }
            //2.发送请求到后端
            $.ajax({
                url: '/message/publish',
                type: 'POST',
                data: {
                    from: from,
                    to: to,
                    say: say
                },
                success: function (res) {
                    // res是后端返回的成功信息
                    console.log(res);
                    if (res) {
                        //3.构造节点
                        var divE = `<div class="message">${from} 对 ${to} 说: ${say}</div>`;
                        //4.添加到留言列表
                        $("#msgList").append(divE);
                        //5.清空输入框
                        $('#from').val('');
                        $('#to').val('');
                        $('#say').val('');
                    } else {
                        alert('留言失败，请稍后再试');
                    }
                }
            });
        }
    </script>
</body>

</html>